<template>
	<div class="simple-audio-player">
		<div class="audio-controls">
			<button 
				@click="play" 
				:disabled="!canPlay"
				class="control-btn play-btn"
			>
				{{ isPlaying ? '暂停' : '播放' }}
			</button>
			
			<button 
				@click="stop" 
				:disabled="!canStop"
				class="control-btn stop-btn"
			>
				停止
			</button>
			
			<button 
				@click="reloadAudio" 
				class="control-btn reload-btn"
			>
				重新加载
			</button>
			
			<button 
				v-if="isMixing && subAudioBuffer"
				@click="testSubAudio" 
				class="control-btn test-btn"
			>
				测试副音频
			</button>
			
			<button 
				@click="diagnoseAudio" 
				class="control-btn diagnose-btn"
			>
				诊断音频
			</button>
			
			<button 
				v-if="isMixing"
				@click="forceReloadSubAudio" 
				class="control-btn force-reload-btn"
			>
				重新加载副音频
			</button>
		</div>
		
		<div class="audio-info">
			<span class="info-text">主音频: {{ mainAudio || '未设置' }}</span>
			<span class="info-text">副音频: {{ subAudio || '未设置' }}</span>
			<span class="info-text">混合模式: {{ isMixing ? '开启' : '关闭' }}</span>
			<span class="info-text">当前时间: {{ formatTime(currentTime) }}</span>
			<span class="info-text">音频状态: {{ getAudioStatus() }}</span>
		</div>
		
		<div v-if="isMixing" class="volume-controls">
			<div class="volume-item">
				<span class="volume-label">主音频音量:</span>
				<input 
					type="range"
					:value="mainVolume" 
					:max="100" 
					@input="onMainVolumeChange"
					class="volume-slider"
				/>
				<span class="volume-value">{{ mainVolume }}%</span>
			</div>
			<div class="volume-item">
				<span class="volume-label">副音频音量:</span>
				<input 
					type="range"
					:value="subVolume" 
					:max="100" 
					@input="onSubVolumeChange"
					class="volume-slider"
				/>
				<span class="volume-value">{{ subVolume }}%</span>
			</div>
		</div>
		
		<div class="progress-container">
			<input 
				type="range"
				:value="currentTime" 
				:max="duration" 
				@input="onSeek"
				:disabled="!canSeek"
				class="progress-slider"
			/>
			<span class="time-display">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
		</div>
		
		<div v-if="error" class="error-message">
			<span>{{ error }}</span>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue'

// Props
const props = defineProps({
	// 主音频地址
	mainAudio: {
		type: String,
		default: ''
	},
	// 副音频地址
	subAudio: {
		type: String,
		default: ''
	},
	// 是否混合播放
	isMixing: {
		type: Boolean,
		default: true
	},
	// 当前播放时间
	currentTime: {
		type: Number,
		default: 0
	}
})

// Emits
const emit = defineEmits(['update:currentTime', 'play', 'pause', 'stop', 'ended'])

// 响应式数据
// Web Audio API 相关
const audioContext = ref(null)
const mainAudioBuffer = ref(null)
const subAudioBuffer = ref(null)
const mixedAudioBuffer = ref(null)
const audioSource = ref(null)
// 播放状态
const isPlaying = ref(false)
const isPaused = ref(false)
// 音频信息
const duration = ref(0)
// 错误信息
const error = ref('')
// 定时器
const updateTimer = ref(null)
// 开始播放时间
const startTime = ref(0)
// 暂停时的时间
const pauseTime = ref(0)
// 音量控制
const mainVolume = ref(70)  // 主音频音量百分比
const subVolume = ref(50)    // 副音频音量百分比

// 计算属性
const canPlay = computed(() => {
	return (props.mainAudio || props.subAudio) && !isPlaying.value;
})

const canStop = computed(() => {
	return isPlaying.value || isPaused.value;
})

const canSeek = computed(() => {
	return duration.value > 0;
})

// 生命周期
onMounted(() => {
	initAudioContext();
})

onBeforeUnmount(() => {
	cleanup();
})

// 方法函数
// 初始化音频上下文
const initAudioContext = async () => {
	try {
		audioContext.value = new (window.AudioContext || window.webkitAudioContext)();
		console.log('音频上下文初始化成功');
	} catch (err) {
		error.value = '音频上下文初始化失败: ' + err.message;
		console.error(error.value);
	}
}

// 下载音频文件
const downloadAudioFile = async (url) => {
	return new Promise((resolve, reject) => {
		console.log('开始下载音频文件:', url);
		
		fetch(url, {
			method: 'GET',
			headers: {
				'Accept': 'audio/*'
			}
		})
		.then(response => {
			console.log('音频文件下载成功:', url, '状态码:', response.status);
			if (response.ok) {
				return response.arrayBuffer();
			} else {
				throw new Error(`HTTP ${response.status}: ${response.statusText || '请求失败'}`);
			}
		})
		.then(data => {
			resolve(data);
		})
		.catch(err => {
			console.error('音频文件下载失败:', url, err);
			reject(new Error(err.message || '网络请求失败'));
		});
	});
}

// 加载主音频
const loadMainAudio = async () => {
	if (!props.mainAudio) return;
	
	try {
		error.value = '';
		console.log('开始加载主音频:', props.mainAudio);
		
		// 尝试使用 Web Audio API
		if (audioContext.value) {
			try {
				const response = await downloadAudioFile(props.mainAudio);
				mainAudioBuffer.value = await audioContext.value.decodeAudioData(response);
				
				// 设置总时长
				if (mainAudioBuffer.value && duration.value === 0) {
					duration.value = mainAudioBuffer.value.duration;
				}
				
				console.log('主音频加载成功（Web Audio API），时长:', duration.value);
				
				// 如果副音频也已加载，准备混合音频
				if (subAudioBuffer.value && props.isMixing) {
					await prepareMixedAudio();
				}
				return;
			} catch (webAudioError) {
				console.warn('Web Audio API 加载失败，尝试备用方案:', webAudioError);
			}
		}
		
		// 如果 Web Audio API 不可用，抛出错误
		throw new Error('Web Audio API 不可用，无法加载音频');
		
	} catch (err) {
		error.value = '主音频加载失败: ' + err.message;
		console.error('主音频加载错误:', err);
	}
}


// 加载副音频
const loadSubAudio = async () => {
	if (!props.subAudio) return;
	
	try {
		error.value = '';
		console.log('开始加载副音频:', props.subAudio);
		
		// 尝试使用 Web Audio API
		if (audioContext.value) {
			try {
				const response = await downloadAudioFile(props.subAudio);
				subAudioBuffer.value = await audioContext.value.decodeAudioData(response);
				
				console.log('副音频加载成功（Web Audio API）');
				
				// 如果主音频也已加载，准备混合音频
				if (mainAudioBuffer.value && props.isMixing) {
					await prepareMixedAudio();
				}
				return;
			} catch (webAudioError) {
				console.warn('Web Audio API 副音频加载失败，尝试备用方案:', webAudioError);
			}
		}
		
		// 如果 Web Audio API 不可用，抛出错误
		throw new Error('Web Audio API 不可用，无法加载副音频');
		
	} catch (err) {
		error.value = '副音频加载失败: ' + err.message;
		console.error('副音频加载错误:', err);
	}
}


// 音频混合方法（修复版本）
const mergeAudio = (audioBufferList) => {
	if (!audioBufferList || audioBufferList.length === 0) return null;
	
	// 获得 AudioBuffer
	const audioBuffers = audioBufferList.filter(buffer => buffer !== null);
	if (audioBuffers.length === 0) return null;
	
	console.log('开始混合音频，音频数量:', audioBuffers.length);
	
	// 最大播放时长
	const maxDuration = Math.max(...audioBuffers.map(audioBuffer => audioBuffer.duration));
	// 最大通道数
	const maxChannelNumber = Math.max(...audioBuffers.map(audioBuffer => audioBuffer.numberOfChannels));
	// 采样率（假设所有音频使用相同采样率）
	const sampleRate = audioBuffers[0].sampleRate;
	
	console.log('混合参数:', {
		maxDuration,
		maxChannelNumber,
		sampleRate,
		bufferLengths: audioBuffers.map(buffer => buffer.length)
	});
	
	// 创建一个新的 AudioBuffer
	const newAudioBuffer = audioContext.value.createBuffer(
		maxChannelNumber, 
		sampleRate * maxDuration, 
		sampleRate
	);
	
	// 初始化输出缓冲区为0
	for (let channel = 0; channel < maxChannelNumber; channel++) {
		const outputData = newAudioBuffer.getChannelData(channel);
		outputData.fill(0);
	}
	
	// 将所有的 AudioBuffer 的数据合并到新的 AudioBuffer 中
	audioBuffers.forEach((audioBuffer, bufferIndex) => {
		console.log(`处理音频 ${bufferIndex + 1}:`, {
			duration: audioBuffer.duration,
			channels: audioBuffer.numberOfChannels,
			length: audioBuffer.length
		});
		
		// 根据音频索引确定音量
		const volume = bufferIndex === 0 ? mainVolume.value / 100 : subVolume.value / 100;
		console.log(`音频 ${bufferIndex + 1} 音量: ${volume * 100}%`);
		
		for (let channel = 0; channel < audioBuffer.numberOfChannels; channel++) {
			const outputData = newAudioBuffer.getChannelData(channel);
			const bufferData = audioBuffer.getChannelData(channel);
			
			// 将音频数据添加到输出缓冲区
			for (let i = 0; i < bufferData.length; i++) {
				outputData[i] += bufferData[i] * volume;
			}
			
			console.log(`通道 ${channel} 混合完成，数据长度: ${bufferData.length}，音量: ${volume * 100}%`);
		}
	});
	
	// 检查混合结果
	const firstChannel = newAudioBuffer.getChannelData(0);
	const maxValue = Math.max(...Array.from(firstChannel).map(Math.abs));
	console.log('混合完成，最大音量值:', maxValue);
	
	// 如果音量过大，进行归一化
	if (maxValue > 1.0) {
		console.log('音量过大，进行归一化处理');
		const normalizeFactor = 1.0 / maxValue;
		for (let channel = 0; channel < maxChannelNumber; channel++) {
			const outputData = newAudioBuffer.getChannelData(channel);
			for (let i = 0; i < outputData.length; i++) {
				outputData[i] *= normalizeFactor;
			}
		}
	}

	return newAudioBuffer;
}

// 准备混合音频
const prepareMixedAudio = async () => {
	if (!mainAudioBuffer.value || !subAudioBuffer.value) return;
	
	try {
		console.log('开始准备混合音频');
		
		// 使用混合方法创建混合音频
		mixedAudioBuffer.value = mergeAudio([mainAudioBuffer.value, subAudioBuffer.value]);
		
		if (mixedAudioBuffer.value) {
			console.log('混合音频准备成功，时长:', mixedAudioBuffer.value.duration);
			duration.value = mixedAudioBuffer.value.duration;
		}
	} catch (err) {
		console.error('混合音频准备失败:', err);
		error.value = '混合音频准备失败: ' + err.message;
	}
}

// 播放音频
const play = async () => {
	try {
		error.value = '';
		
		// 调试信息
		console.log('播放状态检查:', {
			audioContext: !!audioContext.value,
			audioContextState: audioContext.value?.state,
			mainAudioBuffer: !!mainAudioBuffer.value,
			subAudioBuffer: !!subAudioBuffer.value,
			mixedAudioBuffer: !!mixedAudioBuffer.value,
			isMixing: props.isMixing,
			mainAudio: props.mainAudio,
			subAudio: props.subAudio
		});
		
		// 确保音频上下文已启动
		if (audioContext.value.state === 'suspended') {
			await audioContext.value.resume();
		}
		
		// 如果音频还没有加载，先尝试加载
		if (!mainAudioBuffer.value && !mainAudioContext.value && props.mainAudio) {
			console.log('主音频未加载，尝试重新加载...');
			await loadMainAudio();
		}
		
		// 检查是否有可用的音频
		const hasWebAudio = mainAudioBuffer.value && (!props.isMixing || mixedAudioBuffer.value);
		
		if (hasWebAudio) {
			// 使用 Web Audio API 播放
			if (props.isMixing && mixedAudioBuffer.value) {
				console.log('播放混合音频（Web Audio API）');
				await playMixedAudio();
			} else if (mainAudioBuffer.value) {
				console.log('播放主音频（Web Audio API）');
				await playMainAudio();
			}
		} else {
			// 提供更详细的错误信息
			let errorMsg = '没有可播放的音频。';
			if (!audioContext.value) {
				errorMsg += ' 音频上下文未初始化。';
			}
			if (!mainAudioBuffer.value) {
				errorMsg += ' 主音频未加载。';
			}
			if (props.isMixing && !mixedAudioBuffer.value) {
				errorMsg += ' 混合音频未准备。';
			}
			throw new Error(errorMsg);
		}
		
		isPlaying.value = true;
		isPaused.value = false;
		startTime.value = audioContext.value.currentTime - pauseTime.value;
		
		// 开始时间更新
		startTimeUpdate();
		
		emit('play');
		console.log('开始播放');
	} catch (err) {
		error.value = '播放失败: ' + err.message;
		console.error('播放错误详情:', err);
	}
}

// 播放主音频
const playMainAudio = async () => {
	if (!mainAudioBuffer.value) {
		throw new Error('主音频未加载');
	}
	
	// 停止之前的播放
	if (audioSource.value) {
		audioSource.value.stop();
	}
	
	audioSource.value = audioContext.value.createBufferSource();
	audioSource.value.buffer = mainAudioBuffer.value;
	audioSource.value.connect(audioContext.value.destination);
	
	// 设置播放位置
	const offset = pauseTime.value;
	audioSource.value.start(0, offset);
	
	// 监听播放结束
	audioSource.value.onended = () => {
		onPlayEnd();
	};
}

// 播放混合音频
const playMixedAudio = async () => {
	if (!mixedAudioBuffer.value) {
		throw new Error('混合音频未准备');
	}
	
	// 停止之前的播放
	if (audioSource.value) {
		audioSource.value.stop();
	}
	
	audioSource.value = audioContext.value.createBufferSource();
	audioSource.value.buffer = mixedAudioBuffer.value;
	audioSource.value.connect(audioContext.value.destination);
	
	// 设置播放位置
	const offset = pauseTime.value;
	audioSource.value.start(0, offset);
	
	// 监听播放结束
	audioSource.value.onended = () => {
		onPlayEnd();
	};
}


// 暂停播放
const pause = () => {
	if (!isPlaying.value) return;
	
	try {
		// 停止 Web Audio API 音频源
		if (audioSource.value) {
			audioSource.value.stop();
			audioSource.value = null;
		}
		
		isPlaying.value = false;
		isPaused.value = true;
		
		// 记录暂停时间
		if (audioContext.value) {
			pauseTime.value = audioContext.value.currentTime - startTime.value;
		}
		
		// 停止时间更新
		stopTimeUpdate();
		
		emit('pause');
		console.log('暂停播放');
	} catch (err) {
		error.value = '暂停失败: ' + err.message;
		console.error(error.value);
	}
}

// 停止播放
const stop = () => {
	try {
		// 停止 Web Audio API 音频源
		if (audioSource.value) {
			audioSource.value.stop();
			audioSource.value = null;
		}
		
		isPlaying.value = false;
		isPaused.value = false;
		pauseTime.value = 0;
		startTime.value = 0;
		
		// 停止时间更新
		stopTimeUpdate();
		
		// 重置当前时间
		emit('update:currentTime', 0);
		
		emit('stop');
		console.log('停止播放');
	} catch (err) {
		error.value = '停止失败: ' + err.message;
		console.error(error.value);
	}
}

// 播放结束处理
const onPlayEnd = () => {
	isPlaying.value = false;
	isPaused.value = false;
	pauseTime.value = 0;
	startTime.value = 0;
	
	stopTimeUpdate();
	emit('update:currentTime', 0);
	emit('ended');
	console.log('播放结束');
}

// 开始时间更新
const startTimeUpdate = () => {
	updateTimer.value = setInterval(() => {
		if (isPlaying.value && audioContext.value) {
			const currentTime = audioContext.value.currentTime - startTime.value;
			emit('update:currentTime', currentTime);
		}
	}, 100);
}

// 停止时间更新
const stopTimeUpdate = () => {
	if (updateTimer.value) {
		clearInterval(updateTimer.value);
		updateTimer.value = null;
	}
}

// 跳转到指定时间
const onSeek = (e) => {
	const seekTime = parseFloat(e.target.value);
	pauseTime.value = seekTime;
	emit('update:currentTime', seekTime);
	
	// 如果正在播放，重新开始播放
	if (isPlaying.value) {
		pause();
		// 使用 nextTick 确保状态更新后再播放
		setTimeout(() => {
			play();
		}, 0);
	}
}

// 格式化时间
const formatTime = (seconds) => {
	if (!seconds || isNaN(seconds)) return '00:00';
	
	const minutes = Math.floor(seconds / 60);
	const remainingSeconds = Math.floor(seconds % 60);
	return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
}

// 获取音频状态
const getAudioStatus = () => {
	if (!audioContext.value) return '音频上下文未初始化';
	if (!mainAudioBuffer.value) return '主音频未加载';
	
	// 混合模式的详细状态检查
	if (props.isMixing) {
		if (!subAudioBuffer.value) {
			return '副音频未加载';
		}
		if (!mixedAudioBuffer.value && mainAudioBuffer.value && subAudioBuffer.value) {
			return '混合音频准备中...';
		}
	}
	
	if (isPlaying.value) return '正在播放';
	if (isPaused.value) return '已暂停';
	
	return '准备就绪 (Web Audio API)';
}

// 主音频音量变化
const onMainVolumeChange = (e) => {
	mainVolume.value = parseInt(e.target.value);
	console.log('主音频音量调整为:', mainVolume.value + '%');
	
	// 如果正在混合模式，重新准备混合音频
	if (props.isMixing && mainAudioBuffer.value && subAudioBuffer.value) {
		prepareMixedAudio();
	}
}

// 副音频音量变化
const onSubVolumeChange = (e) => {
	subVolume.value = parseInt(e.target.value);
	console.log('副音频音量调整为:', subVolume.value + '%');
	
	// 如果正在混合模式，重新准备混合音频
	if (props.isMixing && mainAudioBuffer.value && subAudioBuffer.value) {
		prepareMixedAudio();
	}
}

// 诊断音频状态
const diagnoseAudio = () => {
	console.log('=== 音频诊断报告 ===');
	console.log('主音频路径:', props.mainAudio);
	console.log('副音频路径:', props.subAudio);
	console.log('混合模式:', props.isMixing);
	console.log('');
	
	console.log('音频上下文状态:');
	console.log('- Web Audio Context:', !!audioContext.value, audioContext.value?.state);
	console.log('- 主音频 Buffer:', !!mainAudioBuffer.value);
	console.log('- 副音频 Buffer:', !!subAudioBuffer.value);
	console.log('- 混合音频 Buffer:', !!mixedAudioBuffer.value);
	console.log('');
	
	console.log('播放状态:');
	console.log('- 正在播放:', isPlaying.value);
	console.log('- 已暂停:', isPaused.value);
	console.log('- 当前时间:', props.currentTime);
	console.log('- 总时长:', duration.value);
	console.log('');
	
	console.log('音量设置:');
	console.log('- 主音频音量:', mainVolume.value + '%');
	console.log('- 副音频音量:', subVolume.value + '%');
	console.log('');
	
	// 检查文件访问
	checkFileAccess();
}

// 检查文件访问
const checkFileAccess = async () => {
	console.log('检查文件访问...');
	
	// 检查主音频
	if (props.mainAudio) {
		try {
			const response = await fetch(props.mainAudio, { method: 'HEAD' });
			console.log('主音频文件访问:', response.ok ? '成功' : '失败', response.status);
		} catch (err) {
			console.log('主音频文件访问失败:', err.message);
		}
	}
	
	// 检查副音频
	if (props.subAudio) {
		try {
			const response = await fetch(props.subAudio, { method: 'HEAD' });
			console.log('副音频文件访问:', response.ok ? '成功' : '失败', response.status);
		} catch (err) {
			console.log('副音频文件访问失败:', err.message);
		}
	}
}

// 测试副音频播放
const testSubAudio = async () => {
	if (!subAudioBuffer.value) {
		error.value = '副音频未加载';
		return;
	}
	
	try {
		error.value = '';
		console.log('测试副音频播放');
		
		// 停止当前播放
		stop();
		
		// 确保音频上下文已启动
		if (audioContext.value.state === 'suspended') {
			await audioContext.value.resume();
		}
		
		// 创建副音频播放源
		const testSource = audioContext.value.createBufferSource();
		testSource.buffer = subAudioBuffer.value;
		testSource.connect(audioContext.value.destination);
		
		// 播放副音频
		testSource.start(0);
		
		// 监听播放结束
		testSource.onended = () => {
			console.log('副音频测试播放结束');
		};
		
		console.log('副音频测试播放开始');
		
	} catch (err) {
		error.value = '副音频测试失败: ' + err.message;
		console.error('副音频测试错误:', err);
	}
}

// 重新加载音频
const reloadAudio = async () => {
	try {
		error.value = '';
		console.log('重新加载音频...');
		
		// 停止当前播放
		stop();
		
		// 清理现有资源
		mainAudioBuffer.value = null;
		subAudioBuffer.value = null;
		mixedAudioBuffer.value = null;
		
		// 重新初始化音频上下文
		await initAudioContext();
		
		// 重新加载音频
		if (props.mainAudio) {
			await loadMainAudio();
		}
		if (props.subAudio) {
			await loadSubAudio();
		}
		
		console.log('音频重新加载完成');
	} catch (err) {
		error.value = '重新加载失败: ' + err.message;
		console.error('重新加载错误:', err);
	}
}

// 强制重新加载副音频
const forceReloadSubAudio = async () => {
	try {
		error.value = '';
		console.log('强制重新加载副音频...');
		
		// 清理副音频资源
		subAudioBuffer.value = null;
		mixedAudioBuffer.value = null;
		
		// 重新加载副音频
		if (props.subAudio) {
			await loadSubAudio();
			
			// 如果主音频已加载且开启混合模式，重新准备混合音频
			if (mainAudioBuffer.value && props.isMixing) {
				await prepareMixedAudio();
			}
		}
		
		console.log('副音频强制重新加载完成');
	} catch (err) {
		error.value = '副音频重新加载失败: ' + err.message;
		console.error('副音频重新加载错误:', err);
	}
}

// 清理资源
const cleanup = () => {
	stop();
	stopTimeUpdate();
	
	if (audioContext.value) {
		audioContext.value.close();
	}
}

// 监听器
watch(() => props.mainAudio, (newVal) => {
	if (newVal) {
		loadMainAudio();
	}
}, { immediate: true })

watch(() => props.subAudio, (newVal) => {
	if (newVal) {
		loadSubAudio();
	}
}, { immediate: true })

watch(() => props.isMixing, (newVal) => {
	// 当混合模式改变时，重新准备音频
	if (mainAudioBuffer.value && subAudioBuffer.value) {
		if (newVal) {
			prepareMixedAudio();
		} else {
			mixedAudioBuffer.value = null;
		}
	}
})
</script>

<style scoped>
	.simple-audio-player {
		padding: 20px;
		background-color: #f8f9fa;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	}

	.audio-controls {
		display: flex;
		justify-content: center;
		gap: 15px;
		margin-bottom: 20px;
	}

	.control-btn {
		padding: 12px 24px;
		border: none;
		border-radius: 6px;
		font-size: 16px;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.3s ease;
		min-width: 80px;
	}

	.control-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	.play-btn {
		background-color: #28a745;
		color: white;
	}

	.play-btn:hover:not(:disabled) {
		background-color: #218838;
		transform: translateY(-2px);
	}

	.stop-btn {
		background-color: #dc3545;
		color: white;
	}

	.stop-btn:hover:not(:disabled) {
		background-color: #c82333;
		transform: translateY(-2px);
	}

	.reload-btn {
		background-color: #6c757d;
		color: white;
	}

	.reload-btn:hover:not(:disabled) {
		background-color: #5a6268;
		transform: translateY(-2px);
	}

	.test-btn {
		background-color: #17a2b8;
		color: white;
	}

	.test-btn:hover:not(:disabled) {
		background-color: #138496;
		transform: translateY(-2px);
	}

	.diagnose-btn {
		background-color: #fd7e14;
		color: white;
	}

	.diagnose-btn:hover:not(:disabled) {
		background-color: #e8650e;
		transform: translateY(-2px);
	}

	.force-reload-btn {
		background-color: #dc3545;
		color: white;
	}

	.force-reload-btn:hover:not(:disabled) {
		background-color: #c82333;
		transform: translateY(-2px);
	}

	.audio-info {
		margin-bottom: 20px;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	.info-text {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		color: #666;
		word-break: break-all;
	}

	.info-text:last-child {
		margin-bottom: 0;
	}

	.volume-controls {
		margin-bottom: 20px;
		padding: 15px;
		background-color: #e9ecef;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	.volume-item {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.volume-item:last-child {
		margin-bottom: 0;
	}

	.volume-label {
		min-width: 100px;
		font-size: 14px;
		color: #666;
		margin-right: 10px;
	}

	.volume-slider {
		flex: 1;
		margin: 0 10px;
	}

	.volume-value {
		min-width: 40px;
		font-size: 14px;
		color: #333;
		text-align: right;
		font-weight: bold;
	}

	.progress-container {
		margin-bottom: 15px;
	}

	.progress-slider {
		width: 100%;
		margin-bottom: 10px;
	}

	.time-display {
		display: block;
		text-align: center;
		font-size: 14px;
		color: #666;
		font-family: monospace;
	}

	.error-message {
		padding: 10px;
		background-color: #f8d7da;
		border: 1px solid #f5c6cb;
		border-radius: 6px;
		color: #721c24;
		font-size: 14px;
		text-align: center;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.simple-audio-player {
			padding: 15px;
		}

		.audio-controls {
			flex-direction: column;
			align-items: center;
		}

		.control-btn {
			width: 100%;
			max-width: 200px;
		}

		.info-text {
			font-size: 13px;
		}
	}
</style>